<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body {
			margin: 0;
			padding: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100vh;
			background-color: #222;
		}

		.btn {
			border: 1px solid #EDEDED;
			padding: 0 40px;
			display: block;
			line-height: 40px;
			-webkit-transition: all 0.6s ease-in;
			-moz-transition: all 0.6s ease-in;
			-ms-transition: all 0.6s ease-in;
			-o-transition: all 0.6s ease-in;
			transition: all 0.6s ease-in;
			color: #FFF;
			font-weight: 600;
			position: relative;
			user-select: none;
		}

		*,
		*:before,
		*:after {
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}

		.btn:hover:after,
		.btn:hover:before {
			width: 100%;
			height: 100%;
		}


		.btn:after,
		.btn:before {
			box-sizing: border-box;
			border: 1px solid transparent;
			width: 0;
			height: 0;
			content: '';
			display: block;
			position: absolute;
		}

		.btn:before {
			bottom: 0;
			right: 0;
			-webkit-transition: border-color 0s ease-in 0.4s, width 0.2s ease-in 0.2s, height 0.2s ease-in;
			transition:border-color 0s ease-in 0.4s, width 0.2s ease-in 0.2s, height 0.2s ease-in;

		}

		.btn:after {
			top: 0;
			left: 0;
			-webkit-transition:border-color 0s ease-in 0.8s,  width 0.2s ease-in 0.6s, height 0.2s ease-in 0.4s;
			transition:border-color 0s ease-in 0.8s,  width 0.2s ease-in 0.6s, height 0.2s ease-in 0.4s;
		}

		.btn:hover:after {
			border-top-color: #ffff00;
			border-right-color: #ffff00;
			-webkit-transition:border-color 0s ease-out 0.4s, width 0.2s ease-out, height 0.2s ease-out 0.2s;
			transition:border-color 0s ease-out 0.4s, width 0.2s ease-out, height 0.2s ease-out 0.2s;
		}


		.btn:hover:before {
			border-bottom-color: #ffff00;
			border-left-color: #ffff00;
			-webkit-transition:  width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;
			transition:  width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;
		}

		.btn:hover {
			border: 1px solid #ffff00;
		}
		
		.btn1{
			margin-top: 50px;
			border: 1px solid #EDEDED;
			padding: 0 40px;
			display: block;
			line-height: 40px;
			color: #FFF;
			font-weight: 600;
			position: relative;
			user-select: none;
		}
		.btn1:after,
		.btn1:before {
			box-sizing: border-box;
			border: 1px solid transparent;
			width: 0;
			height: 0;
			content: '';
			display: block;
			position: absolute;
		}
		
		.btn1:before {
			bottom: 0;
			right: 0;
			animation: sha 0.4s infinite ;
		}
		
		.btn1:after {
			top: 0;
			left: 0;
			animation: sha 0.4s  0.4s infinite ;
		}
		@keyframes sha{
			to{
				width: 1;
				height: 1;
				border: 1px solid yellow;
			},
			from{
				width: 100%;
				height: 100%;
				border: 1px solid red;
			}
		}
	</style>
	<body>
		<section>
			<div class="btn">苏苏就是小苏苏呢</div>
			<div class="btn1">苏苏就是小苏苏呢</div>
		</section>
	</body>
</html>
